<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
  <title>SpriteJS</title>
  <link rel="stylesheet" href="static/css/codemirror.css">
  <link rel="stylesheet" href="static/css/theme/seti.css">
  <link rel="stylesheet" href="static/css/style.css">
  <script src="/js/codemirror/codemirror.js"></script>
  <script src="/js/codemirror/javascript.js"></script>
  <!-- <script src="//lib.baomitu.com/fastclick/1.0.6/fastclick.min.js"></script> -->
  <script src="//lib.baomitu.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="main">
  <div id="menu" class="hide">
    <div class="wrap">
      <a href="/" class="header"></a>
    </div>
    <div class="wrap-menu">
      <ul>
        <li class="title"><a href="/#/zh-cn/index">Docs</a></li>
        <li class="title">Examples</li>
        <li><a href="#">quick start</a></li>
        <li><a href="#basic_sprites">basic sprites</a></li>
        <li><a href="#path_groups">path &amp; groups</a></li>
        <li><a href="#labels">labels</a></li>
        <li><a href="#buttons">buttons</a></li>
        <li><a href="#transforms">transforms</a></li>
        <li><a href="#events">events</a></li>
        <li><a href="#filters">filters</a></li>
        <li><a href="#animations">animations</a></li>
        <li><a href="#svg_path">svg path</a></li>
        <li><a href="#offset_api">offset API</a></li>
        <li><a href="#groups">groups</a></li>
        <li><a href="#ray">ray</a></li>
        <li><a href="#obb">OBB Hit</a></li>
        <li><a href="#d3_bar">D3 bar graph</a></li>
        <li><a href="#d3_hierarchy">D3 hierarchy</a></li>
        <li><a href="#d3_map">D3 map</a></li>
        <li><a href="#d3_links">D3 links</a></li>
        <li><a href="#d3_map_centroid">D3 map centroid</a></li>
        <li><a href="#d3_map_search">D3 map search</a></li>
        <li><a href="#matterjs_mixed_shapes">MJS fixed shapes</a></li>
        <li><a href="#proton_behavior">Proton behavior</a></li>
        <li><a href="#proton_fire">Proton fire</a></li>
        <li><a href="#proton_position">Proton bg particle</a></li>
        <!-- <li><a href="#curvejs_simple">curvejs simple</a></li> -->
      </ul>
    </div>
  </div>
  <div id="demo">
    <div id="paper">
      <div class="loading">Loading</div>
      <iframe id="sandbox"></iframe>
    </div>
    <div id="console-panel"><span>console</span><a href="#">clear</a></div>
    <div id="output"></div>
  </div>
  <div id="code">
    <textarea name="code"></textarea>
  </div>
  <div id="fork">
    <a href="https://github.com/spritejs/spritejs"><img src="static/image/github.png"></a>
  </div>
  <script src="/js/demo/app.js"></script>
</div>
</body>
</html>
